<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>AboutEbookData</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f4f4f4;
            padding: 20px;
            margin: 0;
        }

        nav {
            background: #add8e6;
            color: white;
            padding: 10px 0;
            text-align: center;
        }

        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        nav ul li {
            display: inline;
            margin: 0 20px;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: bold;
        }

        nav ul li a:hover {
            color: #ddd;
        }

        .content {
            background: white;
            margin-bottom: 20px;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: none;
        }

        @media (max-width: 600px) {
            .content {
                margin: 10px 0;
                padding: 15px;
            }

            .content {
                display: none;
            }

            .content.active {
                display: block;
            }
        }
    </style>
</head>
<body>
<nav>
    <ul>
        <li><a href="javascript:void(0);" data-content-id="content1">耻辱柱</a></li>
        <li><a href="javascript:void(0);" data-content-id="content2">EbookDataTools下载</a></li>
        <li><a href="javascript:void(0);" data-content-id="content3">更新日志</a></li>
        <li><a href="javascript:void(0);" data-content-id="content4">数据库下载</a></li>
        <li><a href="javascript:void(0);" data-content-id="content5">许可证</a></li>
    </ul>
</nav>

    <div id="content1" class="content active"></div>
    <div id="content2" class="content"></div>
    <div id="content3" class="content"></div>
    <div id="content4" class="content"></div>
    <div id="content5" class="content"></div>


<script>
document.addEventListener('DOMContentLoaded', function () {
    // 添加事件监听器到每个导航链接
    document.querySelectorAll('nav ul li a').forEach(function (link) {
        link.addEventListener('click', function (event) {
            event.preventDefault();
            let contentId = event.target.dataset.contentId;
            loadContent(contentId);
        });
    });

    // 定义加载内容的函数
    async function loadContent(contentId) {
        // 构造URL
        let url = `/about/${contentId}`;
        let contentDiv = document.getElementById(contentId);

        // 如果已经加载过，只切换显示
        if (contentDiv.innerHTML !== '') {
            toggleContentDisplay(contentId);
            return;
        }

        // 从服务器获取Markdown内容并展示
        try {
            let response = await fetch(url);
            contentDiv.innerHTML = await response.text();
            toggleContentDisplay(contentId);
        } catch (error) {
            console.error('加载内容失败:', error);
        }
    }

    // 定义切换内容显示的函数
    function toggleContentDisplay(contentId) {
        document.querySelectorAll('.content').forEach(function (div) {
            div.style.display = div.id === contentId ? 'block' : 'none';
        });
    }

    // 页面加载时自动加载并显示“耻辱柱”内容
    loadContent('content1');
});
</script>
</body>
</html>